<template>
	<view class="in-player-panel">
		<view class="in-player" :id="playerId"></view>
	</view>
</template>

<script>
	// aliplayer h5 格式播放器的 js 地址
	const jsPath = 'https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js'
	// aliplayer h5 格式播放器的 css 地址
	const cssPath = 'https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css'

	// 视频的长宽比例，采用 width / height 得到，基本按照 16:9 获取
	const ratio = 1.2

	export default {
		name: "aliPlayer",
		props: {
			source: String,
			// 父容器传入的播放器宽度
			width: Number,
			// 父容器传入的播放器高度
			height: Number
		},
		data() {
			return {
				mySource: this.source,
				// 默认宽度
				defaultWidth: 718,
				// 默认高度
				defaultHeight: 225,
				// 每个播放器都具有单独的 id
				playerId: 'inPlayer' + Math.random() * 100000000000000000,
				// 播放器实例
				inPlayer: null
			}
		},
		watch: {
			source: {
				handler(newVal, oldVal) {
					this.mySource = newVal
					this.changePlayAuth()
				}
			},
		},
		computed: {
			// 计算后得到的真实宽度
			realWidth() {
				// 如果从外部传入了高度，则按照外部高度乘以宽高比，获取真实宽度，否则按照默认高度计算
				return `${(this.height || this.defaultHeight) * ratio}px`
			},
			// 计算后得到真实高度
			realHeight() {
				// 如果从外部传入了宽度，则按照外部宽度乘以宽高比，获取真实高度，否则按照默认宽度计算
				return `${(this.width || this.defaultWidth) / ratio}px`
			}
		},
		mounted() {
			// 在 mounted() 中初始化播放器，是为了确保基本元素都已经加载
			this._initialize()
		},
		methods: {
			//暂停视频
			pause() {
				this.inPlayer.pause()
			},
			// 初始化
			_initialize() {
				// 判断播放器全局实例是否已存在，只有当播放器依赖的 JS 加载完成后，播放器的全局实例才存在
				if (!window.Aliplayer) {
					// 尝试获取播放器的 JS 标签
					let inPlayerScriptTag = document.getElementById('inPlayerScriptTag')

					// 判断JS是否已存在
					if (!inPlayerScriptTag) {
						// 不存在则创建 JS 标签
						inPlayerScriptTag = document.createElement('script')
						inPlayerScriptTag.type = 'text/javascript'
						// 指定 JS 的地址
						inPlayerScriptTag.src = jsPath
						// 指定 JS 的 ID
						inPlayerScriptTag.id = 'inPlayerScriptTag'

						// JS 不存在说明 CSS 也不存在，则创建 CSS 标签
						let inPlayerLinkTag = document.createElement('link')
						inPlayerLinkTag.type = 'text/css'
						inPlayerLinkTag.rel = 'stylesheet'
						// 指定 CSS 的地址
						inPlayerLinkTag.href = cssPath

						// JS 不存在说明 CSS 也不存在，则创建 CSS 标签
						let inPlayerStyle = document.createElement('style')
						// 指定 CSS 的地址
						inPlayerStyle.innerHTML =
							".prism-player{height: 225px!important;}.prism-big-play-btn{left: 40%!important;bottom: 35%!important;}"


						// 获取页面的 <head> 标签
						let head = document.getElementsByTagName('head')[0]
						// 将 JS 和 CSS 插入到 DOM 中
						head.appendChild(inPlayerScriptTag)
						head.appendChild(inPlayerLinkTag)
						head.appendChild(inPlayerStyle)
					}

					// JS 插入并加载完成
					if (inPlayerScriptTag.loaded) {
						// 初始化播放器
						this._initPlayer()
					} else {
						// JS 没有加载完成，则监听 JS 的加载事件
						inPlayerScriptTag.addEventListener('load', () => {
							// JS 确认加载完成后，初始化播放器
							this._initPlayer()
						})
					}
				} else {
					// 全局实例存在则直接初始化播放器
					this._initPlayer()
				}
			},
			// 初始化播放器
			_initPlayer() {
				let that = this
				// 确保 DOM 元素都已经渲染完毕

				this.$nextTick(() => {
					// 判断播放器实例是否存在
					if (!that.inPlayer) {
						// 接收从后端获取的鉴权地址，后端实现不赘述
						// this.playAuth = res.data

						// 初始化播放器
						that.inPlayer = window.Aliplayer({
							source: that.mySource,
							// 播放器 ID
							id: that.playerId,
							// 使用 H5 格式
							useH5Prism: true,
							// 不是直播
							isLive: false,
							// 不自动播放
							autoplay: true
						});
					} else {
						// 存在播放器实例则先销毁组件
						that.inPlayer.dispose()
						// 将播放器实例重置
						that.inPlayer = null
						// 清空播放器 DOM 内容
						document.getElementById(that.playerId).innerHTML = ''

						// 再次初始化
						that._initPlayer()
					}
				})
			},
			// 更新播放地址
			changePlayAuth() {
				// 重新初始化
				this._initPlayer()
			}
		},
	}
</script>

<style>
</style>
